<link href="/ast/css/bootstrap.min.css" rel="stylesheet">
<link href="/ast/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/ast/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="/ast/layui/css/layui.css" />
<script type="text/javascript" src="/ast/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/ast/js/jquery.min.js"></script>
<script src="/ast/layui/layui.js"></script>
<style>
        .template-card {
            margin-bottom: 30px;
            text-align: center;
            height: auto;
        }
        .template-img {
            width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover;
        }
        .template-name {
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div class="container-fluid">
	         <div class="row">
	             <div class="col-lg-12">
	                 <div class="card">
                    
                     </div>
    <div class="container mt-5">
        <div class="row">
            <div class="col-12">
                
            </div>
        </div>
        <div class="row">
      
        </div>
    </div>
    <script>
      

      fetch('./file/select.php').then(res => res.json()).then(files => {
        let filesArray = [];
        for (let key in files) {
            if (files.hasOwnProperty(key)) {
                filesArray.push(files[key]);
            }
        }
    filesArray.forEach(file => {
        const cardDiv = document.createElement('div');
        cardDiv.className = 'col-sm-6 col-md-4';
        const cardInnerDiv = document.createElement('div');
        cardInnerDiv.className = 'card template-card';
        
        let img;
        if (file.type === 'jpg' || file.type === 'png' || file.type === 'gif') {
            img = document.createElement('img');
            img.src = `/uploads/canvas/${file.name}`;
            img.alt = '';
            img.className = 'card-img-top template-img';
        } else {
            img = document.createElement('img');
            img.src = '/ast/json_img/file.png';
            img.alt = '';
            img.className = 'card-img-top template-img';
        }
        
        cardInnerDiv.appendChild(img);
        
        const cardBody = document.createElement('div');
        cardBody.className = 'card-body';
        const title = document.createElement('h5');
        title.className = 'card-title';
        title.textContent = file.name;
        cardBody.appendChild(title);
        cardInnerDiv.appendChild(cardBody);
        const link2 = document.createElement('a');
        link2.className = 'btn btn-danger';
        link2.textContent = '删除';
        link2.onclick = function() {
            layer.confirm('确定删除吗？', {
                btn: ['确定', '取消']
            }, function() {
                fetch('./file/del.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ name: file.name })
                }).then(() => {
                    layer.msg('删除成功', {
                        icon: 1,
                        time: 2000
                    }, () => location.reload());
                });
            });
        };
        

        cardInnerDiv.appendChild(link2);
        cardDiv.appendChild(cardInnerDiv);
        document.querySelector('.row').appendChild(cardDiv);
    });
});
    </script>